<template>
  <transition name="fade">
    <div
      class="confirmCustom-box"
      v-show="visible">
      <el-container
        class="confirmCustom"
      >
        <el-header
          height="46px"
          class="confirmCustom-header">
          <span class="title">{{ title }}</span>
          <i
            @click.stop="closeHandle"
            class="el-icon-close close"/>
        </el-header>
        <el-main class="confirmCustom-main">
          <h3 class="main-content">
            <i
              v-show="needIcon"
              :class="needIcon"
              class="icon"/>
            {{ mainContent }}
          </h3>
          <p
            class="content"
            v-show="content"
            :class="needIcon && 'icon'">{{ content }}</p>
        </el-main>
        <el-footer
          height="auto"
          class="confirmCustom-footer">
          <el-button
            size="small"
            :type="btnGroup.length ? btnGroup[0].type : ''"
            @click.stop="cancel">{{ btnGroup.length && btnGroup[0].val }}</el-button>
          <el-button
            size="small"
            :type="btnGroup.length ? btnGroup[1].type : ''"
            @click.stop="confirm">{{ btnGroup.length && btnGroup[1].val }}</el-button>
        </el-footer>
      </el-container>
    </div>
  </transition>
</template>

<script>
import { Button } from 'element-ui'

let messageBox
let typeMap = {
  success: 'success',
  info: 'info',
  warning: 'warning',
  error: 'error'
}

export default {
  components: { Button },
  data () {
    return {
      visible: false,
      type: 'warning',
      mainContent: '',
      content: '',
      status: '',
      title: '',
      needIcon: '',
      btnGroup: []
    }
  },
  methods: {
    cancel () {
      this.status = 'cancel'
    },
    closeHandle () {
      this.status = ''
      this.visible = false
    },
    confirm () {
      this.status = 'confirm'
    }
  }
}
</script>
<style lang="less">
@import '../../assets/var.less';

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.confirmCustom-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: @popupBgColor;

  .confirmCustom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 420px;
    min-height: 130px;
    border: @defaultBorder;
    background-color: #fff;

    .confirmCustom-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        color: #303133;
        font-size: 18px;
      }

      .close {
        cursor: pointer;
      }
    }

    .confirmCustom-main {
      padding: 10px 20px;

      .main-content {
        font-weight: normal;
        color: @defaultFontColor;
        display: flex;
        align-items: center;
        height: 24px;
        font-size: @defaultFontSize;

        .icon {
          color: @themeOrange;
          font-size: 24px;
          margin-right: 10px;
          line-height: 20px;
        }
      }

      .content {
        line-height: 20px;
        font-size: @defaultFontSize;

        &.icon {
          margin-left: 34px;
        }
      }
    }

    .confirmCustom-footer {
      padding: 5px 20px 10px 20px !important;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
</style>
